<template>
	<view class="login">
		<view class="content">
			<!-- 头部logo -->
			<view class="header">
				<image :src="logoImage"></image>
				<text>云课堂</text>
			</view>
			<!-- 主体表单 -->
			<view class="main">
				<wInput v-model="phoneData" type="text" maxlength="11" placeholder="账号登陆 :"></wInput>
				<wInput v-model="passData" type="password" maxlength="11" placeholder="密码 :"></wInput>
			</view>

			<view class=" round margin-top" style=";color: rgba(0,0,0,0.7); box-shadow: 0 0 60upx 0 rgba(43,86,112,.1) ;display: flex;padding: 15upx;margin-left:10%;margin-right: 10%;">
				<view class="title" style="margin-left: 20upx;">角色：</view>
				<picker @change="PickerChange" :value="role_index" :range="picker">
					<view class="picker" style="margin-left: 20upx;">
						{{role_index>-1?picker[role_index]:'选择角色'}}
					</view>
				</picker>
			</view>

			<wButton text="登 录" :rotate="isRotate" @click.native="startLogin()"></wButton>

			<!-- 其他登录 -->
			<!-- 	<view class="other_login cuIcon">
				<view class="login_icon">
					<view class="cuIcon-weixin" @tap="login_weixin"></view>
				</view>
				<view class="login_icon">
					<view class="cuIcon-weibo" @tap="login_weibo"></view>
				</view>
				<view class="login_icon">
					<view class="cuIcon-github" @tap="login_github"></view>
				</view>
				
			</view> -->

			<!-- 底部信息 -->
			<view class="footer">
				<navigator url="register" open-type="navigate">注册账号</navigator>
			</view>

		</view>
	</view>
</template>

<script>
	var _this;
	import wInput from '../../components/watch-login/watch-input.vue' //input
	import wButton from '../../components/watch-login/watch-button.vue' //button

	export default {
		data() {
			return {
				role_index: 1, //角色小标
				picker: ["教师", "学生"], //角色
				//logo图片 base64
				logoImage: '',
				phoneData: '', //学号
				passData: '', //密码
				isRotate: false, //是否加载旋转
			};
		},
		components: {
			wInput,
			wButton,
		},
		mounted() {
			_this = this;
			//this.isLogin();
		},
		methods: {

			startLogin() {

				//验证
				if (_this.phoneData == '' || _this.phoneData == null) {
					uni.showToast({
						title: "账号不能为空！",
						icon: 'none',
						duration: 1000
					})
					return;
				}

				if (_this.passData == '' || _this.passData == null) {
					uni.showToast({
						title: "密码不能为空！",
						icon: 'none',
						duration: 1000
					})
					return;
				}

				_this.isRotate = true; // 开启登陆动画
				// 登陆
				uni.request({
					url: _this.api + "user/login", //登陆
					method: "POST",
					data: {
						password: _this.passData,
						name: _this.phoneData,
						authtype: _this.picker[_this.role_index]
					},
					sslVerify:false,
					header: {
						"content-type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						_this.isRotate = false //改变状态

						if (res.data.code == "200") {
							// 登陆成功调转界面
							console.log(res.data.data.authtype);

							if (res.data.data.authtype == "教师") { //教师
								console.log("teacher")
								uni.reLaunch({
									url: "/pages/index/index_t/index_t"
								})
							} else { //学生
								console.log("student")
								uni.reLaunch({
									url: "/pages/index/index"
								})
							}

							// 添加缓存
							uni.setStorageSync("user_info", res.data.data);
							console.log(res.data.data)
						} else {
							uni.showToast({
								title: res.data.message,
								icon: "none",
								duration: 1000
							})
						}

					},
					fail: (err) => {
						console.log(err)
						_this.isRotate = false; // 开启登陆动画
						uni.showToast({
							title: "登陆失败请稍后在试！",
							icon: 'none',
							duration: 1000
						})
					}
				})

			},
			//角色选择
			PickerChange(e) {
				this.role_index = e.detail.value
			},

			login_weixin() {
				//微信登录
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '...'
				});
			},
			login_weibo() {
				//微博登录
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '...'
				});
			},
			login_github() {
				//github登录
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '...'
				});
			}
		}
	}
</script>

<style>
	@import url("../../components/watch-login/css/icon.css");
	@import url("./css/main.css");
</style>
